import React, { Component } from 'react';
import { CSSTransition } from "react-transition-group";
import { connect } from "react-redux";
import { Link } from "react-router-dom";
import { actionCreator } from "./store";
import { actionCreator as LoginActionCreator } from "../../pages/login/store";

import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  NavSearch,
  SearchWrapper,
  SearchInfo,
  SearchInfoTitle,
  SearchInfoRefresh,
  SearchInfoList,
  SearchInfoItem
} from "./style";

class Header extends Component {
  // constructor(props) {
  //   super(props);
  //   // 创建Ref
  //   this.refreshIcon = React.createRef();
  // }
  getListArea() {
    const {
      focused, mouseIn, list, page, pageSize, pageTotal, handleMouseEnter, handleMouseLeave, handleChangePage
    } = this.props

    const newList = list.toJS();
    const showList = []

    if(newList.length > 0) {
      for (let i = (page - 1) * pageSize; i < page * pageSize; i++) {
        showList.push(<SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>)
      }
    }
    
    return focused || mouseIn ? (
      <SearchInfo
        ref={this.searchInfo}
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      >
        <SearchInfoTitle>
          热门搜索
          <SearchInfoRefresh
            onClick={() => handleChangePage(page, pageTotal, this.refreshIcon)}
          >
            <i
              className="iconfont icon-shuaxin"
              // ref={this.refreshIcon}
              ref={(iconEle) => {this.refreshIcon = iconEle}}
            ></i>
            换一批
          </SearchInfoRefresh>
        </SearchInfoTitle>
        <SearchInfoList>
          {showList}
        </SearchInfoList>
      </SearchInfo>
    ) : null
  }

  render() { 
    const {
      focused, list, handleInputFocused, handleInputBlur, isLogin, handleLogout
    } = this.props
  
    return (
      <HeaderWrapper>
        <Link to="/">
          <Logo />
        </Link>
        <Nav>
          <NavItem className="left active">首页</NavItem>
          <NavItem className="left">下载App</NavItem>
          {
            isLogin ? 
            <NavItem className="right logout" onClick={handleLogout}>退出</NavItem> :
            <NavItem className="right">
              <Link className="login" to="/login">登录</Link>
            </NavItem>
          }
          <NavItem className="right">
            {/* 应用字体图标 */}
            <i className="iconfont icon-zimu"></i>
          </NavItem>
          <SearchWrapper
            className={focused ? 'focused' : ''}
          >
            <CSSTransition
              in={focused}
              timeout={200}
              classNames="slide"
            >
              <NavSearch 
                className={focused ? 'focused' : ''}
                onFocus={() => handleInputFocused(list)}
                onBlur={handleInputBlur}
              ></NavSearch>
            </CSSTransition>
            <i className="iconfont icon-sousuo"></i>
            {this.getListArea()}
          </SearchWrapper>
        </Nav>
      </HeaderWrapper>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    // focused: state.header.get('focused')
    
    // 需要通过redux-immutable生成，两种写法都可以
    // focused: state.get('header').get('focused')
    focused: state.getIn(['header', 'focused']),
    list: state.getIn(['header', 'list']),

    mouseIn: state.getIn(['header', 'mouseIn']),
    page: state.getIn(['header', 'page']),
    pageSize: state.getIn(['header', 'pageSize']),
    pageTotal: state.getIn(['header', 'pageTotal']),

    isLogin: state.getIn(['login', 'isLogin'])
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    handleInputFocused(list) {
      const { size } = list
      size === 0 && dispatch(actionCreator.getSearchList())
      dispatch(actionCreator.searchFocus())
    },
    handleInputBlur() {
      dispatch(actionCreator.searchBlur())
    },
    handleMouseEnter() {
      dispatch(actionCreator.listMouseEnter())
    },
    handleMouseLeave() {
      dispatch(actionCreator.listMouseLeave())
    },
    handleChangePage(page, pageTotal, refreshIcon) {
      const rotate = parseInt(refreshIcon.style.transform.replace(/[^0-9]/gi, ''), 10) || 0;
      refreshIcon.style.transform = `rotate(${rotate + 360}deg)`;
      if(page < pageTotal) {
        dispatch(actionCreator.changePage(page + 1))
      } else {
        dispatch(actionCreator.changePage(1))
      }
    },
    handleLogout() {
      dispatch(LoginActionCreator.logout())
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);